<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>四大发明</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<style>
    * {
        padding: 0px;
        margin: 0px;
        list-style: none;
        bottom: 0;
        text-decoration: none;
    }
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: rgb(170, 190, 250);
    }
    .shell {
        width: 900px;
        height: 500px;
        position: relative;
        overflow: hidden;
        border-radius: 5px;
        border: 10px #fff solid;
        box-shadow: 20px 30px 20px rgba(0, 0, 0, 0.5);
    }
    .images {
        width: 300%;
        height: 100%;
        display: flex;
        position: absolute;
        left: 0;
        transition: .2s;
    }
    .img {
        width: 100%;
        background-size: cover;
    }
    .img:nth-child(1) {
        background-image: url("./uploads/China11.jpg");
    }
    .img:nth-child(2) {
        background-image: url("./uploads/China12.jpg");
    }

    .img:nth-child(3) {
        background-image: url("./uploads/China13.jpg");
    }
    .min-images {
        display: flex;
        justify-content: space-evenly;
        position: absolute;
        bottom: 20px;
        width: 40%;
        z-index: 999;
        right: 10%;
    }
    .min {
        width: 60px;
        height: 60px;
        cursor: pointer;
        border-radius: 50%;
        background-size: cover;
        border: solid rgba(255, 255, 255, 0.5) 5px;
        background-position: -20px 0;
    }
    .min:nth-child(1) {
        background-image: url("./uploads/China11.jpg");
    }
    .min:nth-child(2) {
        background-image: url("./uploads/China12.jpg");
    }
    .min:nth-child(3) {
        background-image: url("./uploads/China13.jpg");
    }

    .button {
        width: 100%;
        height: 100%;
        position: absolute;
        display: flex;
        justify-content: space-between;
        user-select: none;
    }

    .button-left,
    .button-right {
        font-size: 50px;
        background-color: rgba(160, 193, 255, 0.7);
        padding: 0 20px;
        cursor: pointer;
        line-height: 500px;
    }
</style>


<body>
    <div class="shell">
        <ui class="images">
            <li class="img"></li>
            <li class="img"></li>
            <li class="img"></li>
        </ui>
            <ui class="min-images">
                <li class="min"></li>
                <li class="min"></li>
                <li class="min"></li>
            </ui>
        <div class="button">
            <div class="button-left"><</div>
            <div class="button-right">></div>
        </div>
    </div>
  </body>

<script>
    let left = document.querySelector(".button-left")
    let right = document.querySelector(".button-right")
    let min = document.querySelectorAll(".min")
    let images = document.querySelector(".images")
    let index = 0
    let time
    function position() {
        images.style.left = (index * -100) + "%"
    }
    function add() {
        if (index >= min.length - 1) {
            index = 0
        } else {
            index++
        }
    }
    function desc() {
        if (index < 1) {
            index = min.length - 1
        } else {
            index--
        }
    }
    function timer() {
        time = setInterval(() => {
            index++
            desc()
            add()
            position()
        }, 3000)
    }
    left.addEventListener("click", () => {
        desc()
        position()
        clearInterval(time)
        timer()
    })
    right.addEventListener("click", () => {
        add()
        position()
        clearInterval(time)
        timer()
    })
    for (let i = 0; i < min.length; i++) {
        min[i].addEventListener("click", () => {
            index = i
            position()
            clearInterval(time)
            timer()
        })
    }
    timer()
</script>